<template>
    <div id="app">
        <v-header></v-header>
        <!--<div class="tab">-->
            <!--路由是可以隐藏的，这只是个a链接，只要在建立路由map的时候有添加正确的路由以及要渲染的组件，-->
            <!--使用编程式跳转也可以切换要渲染的组件-->
            <!--去掉路由连接-->
            <!--<router-link to="/bxnumber" class="tab-item">包厢</router-link>-->
            <!--<router-link to="/goods" class="tab-item">点单</router-link>-->
            <!--<router-link to="/balance" class="tab-item">结算</router-link>-->
        <!--</div>-->
        <div>
            <!--路由中可以使用props传递参数-->
            <transition
                    :enter-active-class="enterActiveClass"
                    :leave-active-class="leaveActiveClass">
            <!--可以通过transition添加出现和退出时的动画效果-->
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
  import vHeader from './components/header/header.vue'
//  判断http请求是否成功的常量
  const ERR_NO = 0
  export default {
    name: 'app',
    data () {
      return {
        enterActiveClass: '',
        leaveActiveClass: ''
      }
    },
    components: {
//      这里只注册了一个header组件
      vHeader: vHeader
    },
    created () {
//      用于根据menulist中的每一项的type来动态设置类型的map
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
//      不直接发送http请求的话，列表滚动必须切换一次界面才能生效，故而http请求必须在good页面发送
      this.$http.get('/api/goods').then(response => {
        response = response.body
        if (response.errno === ERR_NO) {
          this.$store.dispatch('setGoods', response.data)
        }
      }, response => {
        //        这里是http请求失败时候的回调
        console.log('web flault')
      })
    },
    watch: {
      $route (to, from) {
        const toDepth = to.name.length
        const fromDepth = from.name.length
        if (toDepth > fromDepth) {
          this.enterActiveClass = 'animated fadeInRight'
          this.leaveActiveClass = 'animated fadeOutLeft'
        } else {
        this.enterActiveClass = 'animated fadeInLeft'
        this.leaveActiveClass = 'animated fadeOutRight'
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "./common/stylus/mixin.styl"
    @import "../static/css/animate.css"
    /*很容易忘记import这个样式*/
    /*&.fade-enter-active,&.fade-leave-active*/
        /*transition all 0.5s ease*/
    /*&.fade-enter,&.fade-leave-active*/
        /*opacity 0*/
</style>
